<template>
	<view class="setup">
		<view class="setupTop">
			<image :src="list.img" mode="aspectFill"></image>

			<view @click="$refs.popset.show()" class="setupTopText">更换头像</view>
		</view>
		<view class="setupList">
			<listtext title="昵称" :text="list.username" @click="getSave(1)"></listtext>
			<listtext title="姓名" :text="list.name" @click="getSave(2)"></listtext>
			<listtext title="手机号" :iSimg="false" :text="list.phone"></listtext>
			<!-- <listtext title="地址" :text="region" @click="openPicker"></listtext> -->
			<!-- <listtext title="详细地址" :text="list.add_ress" @click="getSave(3)"></listtext> -->
			<!-- <listtext title="芝麻信用分" :iSimg="false" :text="list.dit"></listtext> -->
		</view>
		<view class="setupButton">
			<button @click="$refs.popOut.show()">退出当前账号</button>
		</view>
		<pop ref="popOut" direction="center" :is_close="false" :is_mask="true" :width="660" height="fit-content" :maskFun="true">
			<iSpop text="确定要退出当前账号吗？" left="取消" right="确定" @clickleft="$refs.popOut.close()" @clickright="getcancel">
			</iSpop>
		</pop>
		<pop ref="popText" direction="below" :is_close="true" :is_mask="true" :width="750" height="fit-content" :maskFun="true">
			<view class="setSave">
				<view class="setSaveTitle">
					修改{{type==1?'昵称':type==2?'姓名':'详细地址'}}
				</view>
				<view class="setSaveInput">
					<input type="text" placeholder="请输入昵称" placeholder-style="font-size: 28rpx;color: #999999;" v-if="type == 1" v-model="listTwo.username">
					<input type="text" placeholder="请输入姓名" placeholder-style="font-size: 28rpx;color: #999999;" v-if="type == 2" v-model="listTwo.name">
					<input type="text" placeholder="请输入详细地址" placeholder-style="font-size: 28rpx;color: #999999;" v-if="type == 3" v-model="listTwo.add_ress">
				</view>
				<view class="setSaveBtn">
					<button @click="getIsSave">保存</button>
				</view>
			</view>
		</pop>
		<pop ref="popset" direction="below" :is_close="false" :is_mask="true" :width="750" height="fit-content"
			:maskFun="true">
			<view class="setSave">
				<view class="setSaveFor" @click="unploadImg(2)">
					相机
				</view>
				<view class="setSaveFor twoset" @click="unploadImg(1)">
					相册
				</view>
				<view class="setQuxiao" @click="$refs.popset.close()">
					取消
				</view>
			</view>
		</pop>
		<lotus-address v-on:choseVal="choseValue" :lotusAddressData="lotusAddressData"></lotus-address>
	</view>
</template>

<script>
	import pop from "@/components/ming-pop/ming-pop.vue";
	import listtext from '@/components/listtext/listtext.vue'
	import lotusAddress from "../../components/Winglau14-lotusAddress/Winglau14-lotusAddress.vue";
	import {
		base64ToPath,
		pathToBase64
	} from "@/js_sdk/mmmm-image-tools/index.js"
	export default {
		data() {
			return {
				type: 1, //1昵称  2 姓名
				region: '',
				list: {
					img: '',
					add_ress: '',
					pro_id: '',
					city_id: '',
					area_id: '',
					add1: '请选择',
				},
				listTwo: {
					img: '',
					name: '',
					username: '',
					phone: '',
					dit: '',
					add_ress: '',
				},
				imageValue: [],
				lotusAddressData: {
					visible: false,
					provinceName: '',
					cityName: '',
					townName: '',
				},
			};
		},
		components: {
			listtext,
			lotusAddress,
			pop
		},
		onLoad() {
			setTimeout(() => {
				this.init()
			}, 1000)
		},
		methods: {
			//回传已选的省市区的值
			choseValue(res) {
				//res数据源包括已选省市区与省市区code
				console.log(res);
				this.lotusAddressData.visible = res.visible; //visible为显示与关闭组件标识true显示false隐藏
				//res.isChose = 1省市区已选 res.isChose = 0;未选
				if (res.isChose) {
					this.lotusAddressData.provinceName = res.province; //省
					this.lotusAddressData.cityName = res.city; //市
					this.lotusAddressData.townName = res.town; //区
					this.list.pro_id = res.provinceCode
					this.list.city_id = res.cityCode
					this.list.area_id = res.townCode 
					this.region = `${res.province} ${res.city} ${res.town}`; //region为已选的省市区的值
					this.$request("User/SaveUser", {
						data: {
							pro_id: res.provinceCode,
							city_id: res.cityCode,
							area_id: res.townCode,
						},
						isLoad: false
					}).then(res => {
						this.init()
					})
				}
			},
			//打开picker
			openPicker() {
				this.lotusAddressData.visible = true;
			},
			// 获取上传状态
			select(e) {
				console.log('选择文件：', e)

				return
			},
			// 获取上传状态
			init() {
				this.$request("User/index", {
					data: {

					},
					isLoad: false
				}).then(res => {
					if(!res.result)return
					this.list = res.result
					this.listTwo.name = this.list.name
					this.listTwo.username = this.list.username
				})
			},
			getIsSave() {
				this.$request("User/SaveUser", {
					data: {
						name: this.listTwo.name,
						username: this.listTwo.username,
						add_ress: this.listTwo.add_ress,
					},
					isLoad: false
				}).then(res => {
					this.init()
					this.$refs.popText.close()
				})
			},
			getcancel() {
				console.log("退出登录")
				uni.removeStorageSync('zfbtoken');
				uni.reLaunch({
					url: '/pages/tab/tabOne/tabOne'
				});
			},
			getSave(e) {
				this.type = e
				this.$refs.popText.show()
			},
			uploadPhoto() {
				uni.getFileSystemManager().readFile({
					filePath: this.list.img, //选择图片返回的相对路径
					encoding: 'base64', //编码格式
					success: res => { //成功的回调
						let base64 = 'data:image/jpeg;base64,' + res.data //不加上这串字符，在页面无法显示的哦
						this.$request("Home/upload", {
							data: {
								img: base64
							},
							isLoad: false
						}).then(res => {
							this.$refs.popset.close()
							this.$request("User/SaveUser", {
								data: {
									img: res.result,
									name: this.listTwo.name,
									username: this.listTwo.username,
								},
								isLoad: false
							}).then(res => {
								this.init()
							})
						})
					},
					fail: (e) => {
						console.log("图片转换失败", e);
					}
				})
			},
			unploadImg(type) {
				// H5  
				// #ifdef H5
				console.log("网页上传数据")
				let phonetype = ''
				if(type == 1){
					phonetype = 'album'
				}else{
					phonetype = 'camera'
				}
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: [phonetype], //从相册选择
					success: (res) => {
						// #ifdef H5
						this.getH5Base64(res.tempFiles[0], (base64) => {
							this.$request("Home/upload", {
								data: {
									img: base64
								},
								isLoad: false
							}).then(res => {
								this.$refs.popset.close()
								this.$request("User/SaveUser", {
									data: {
										img: res.result,
										name: this.listTwo.name,
										username: this.listTwo.username,
									},
									isLoad: false
								}).then(res => {
									this.init()
								})
							})
						});
						// #endif
						// #ifdef APP-PLUS
						pathToBase64(res.tempFilePaths[0]).then(base64 => {
							this.$request("Home/upload", {
								data: {
									img: base64
								},
								isLoad: false
							}).then(res => {
								this.$refs.popset.close()
								this.$request("User/SaveUser", {
									data: {
										img: res.result,
										name: this.listTwo.name,
										username: this.listTwo.username,
									},
									isLoad: false
								}).then(res => {
									this.init()
								})
							})
						})
						// #endif
					},
				});
				// #endif 
				//  总相册选择   支付宝
				// #ifdef MP-ALIPAY
				if (type == 1) {
					uni.chooseImage({
						count: 1,
						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album'], //从相册选择
						success: (res) => {
							this.list.img = res.tempFiles[0].path
							this.uploadPhoto()
						},
					});
				} else {
					uni.chooseImage({
						count: 1,
						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['camera'], //拍照
						success: (res) => {
							this.list.img = res.tempFiles[0].path
							this.uploadPhoto()
						},
					});
				}
				// #endif 
				// #ifdef MP-WEIXIN
				if (type == 1) {
					uni.chooseImage({
						count: 1,
						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album'], //从相册选择
						success: (res) => {
							this.list.img = res.tempFiles[0].path
							this.uploadPhoto()
						},
					});
				} else {
					uni.chooseImage({
						count: 1,
						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['camera'], //拍照
						success: (res) => {
							this.list.img = res.tempFiles[0].path
							this.uploadPhoto()
						},
					});
				}
				// #endif 

			},
			getH5Base64(file, success) {
				var reader = new FileReader(); //实例化文件读取对象
				reader.onload = ev => success(ev.target.result)
				reader.readAsDataURL(file);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.setupTop {
		text-align: center;
		background-color: #fff;
		padding-top: 90rpx;

		image {
			width: 168rpx;
			height: 168rpx;
			border-radius: 100rpx;
			// border: 1rpx solid red;
		}

		.setupTopText {
			padding: 32rpx 0;
			font-size: 28rpx;
			color: #1078FF;
		}
	}

	.setupList {
		background-color: #fff;
		margin-top: 20rpx;
	}

	.setupButton {
		margin-top: 456rpx;

		button {
			margin: 0 auto;
			width: 568rpx;
			height: 100rpx;
			line-height: 100rpx;
			background-color: #fff;
			font-size: 32rpx;
			color: #323233;
			border-radius: 60rpx;
		}
	}

	.setSave {
		.setSaveTitle {
			text-align: center;
			font-weight: bold;
			font-size: 28rpx;
		}

		.setSaveInput {
			input {
				width: 665rpx;
				font-size: 28rpx;
				border: 1rpx solid #999999;
				border-radius: 8rpx;
				text-align: center;
				margin: 80rpx 0;
				height: 80rpx;
			}
		}

		.setSaveBtn {
			button {
				margin: 0 auto;
				background-color: #F7BC1C;
				line-height: 84rpx;
				height: 84rpx;
				// width: 665rpx;
				border-radius: 12rpx;
				font-size: 28rpx;
				color: #333333;
				font-weight: bold;
			}
		}

		.setSaveFor {
			padding: 0 0 30rpx 0;
			border-bottom: 1rpx solid #DBDBDB;
			color: #1078FF;
			font-size: 28rpx;
			text-align: center;
		}

		.twoset {
			padding-top: 30rpx;
			border-bottom: none;
		}

		.setQuxiao {
			padding: 36rpx 0 0 0;
			border-top: 1rpx solid #000000;
			color: #666666;
			font-size: 28rpx;
			text-align: center;
		}
	}
</style>
